<template>
  <div class="article-manager">
    <div class="i-layout-page-header header_top">
      <div class="i-layout-page-header fl_header">
        <router-link :to="{ path: '/admin/repair/store' }"
          ><Button icon="ios-arrow-back" size="small" type="text">返回</Button></router-link
        >
        <Divider type="vertical" />
        <span
          class="ivu-page-header-title mr20"
          style="padding: 0"
          v-text="$route.params.id ? '编辑信息' : '添加信息'"
        ></span>
      </div>
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Form
        class="form"
        ref="formValidate"
        :model="formValidate"
        :rules="ruleValidate"
        :label-width="labelWidth"
        :label-position="labelPosition"
        @submit.native.prevent
      >
        <div class="goodsTitle acea-row">
          <div class="title">详细信息</div>
        </div>
        <Row :gutter="24" type="flex">
          <Col v-bind="grid" class="mr50">
            <FormItem label="名称：" prop="name" label-for="name">
              <Input v-model="formValidate.name" placeholder="请输入" element-id="name" style="width: 90%" />
            </FormItem>
          </Col>
          <Col v-bind="grid" class="mr50">
            <FormItem label="加入时间：" prop="join_time" label-for="join_time">
              <Input v-model="formValidate.join_time" placeholder="请输入" element-id="join_time" style="width: 90%" />
            </FormItem>
          </Col>
          <Col v-bind="grid" class="mr50">
            <FormItem label="安装地址：" prop="address" label-for="address">
              <Input v-model="formValidate.address" placeholder="请输入" element-id="address" style="width: 90%" />
            </FormItem>
          </Col>
          <Col v-bind="grid" class="mr50">
            <FormItem label="电话：" prop="phone" label-for="phone">
              <Input v-model="formValidate.phone"  placeholder="请输入" style="width: 90%" />
            </FormItem>
          </Col>
          <Col v-bind="grid" class="mr50">
            <FormItem label="使用期限：" prop="use_time" label-for="use_time">
              <Input v-model="formValidate.use_time"  placeholder="请输入" style="width: 90%" />
            </FormItem>
          </Col>
          <Col v-bind="grid" class="mr50">
            <FormItem label="开始时间：" prop="start_time" label-for="start_time">
              <DatePicker
                :editable="false"
                @on-change="onchangeStartTime"
                :value="formValidate.start_time"
                format="yyyy-MM-dd HH:mm"
                type="datetime"
                placement="bottom-end"
                placeholder="请选择时间"
                style="width: 90%"
              ></DatePicker>
            </FormItem>
          </Col>
          <Col v-bind="grid" class="mr50">
            <FormItem label="结束时间：" prop="end_time" label-for="end_time">
              <!-- <Input v-model="formValidate.end_time"  placeholder="请输入" style="width: 90%" /> -->
			  <DatePicker
			    :editable="false"
			    @on-change="onchangeEndTime"
			    :value="formValidate.end_time"
                format="yyyy-MM-dd HH:mm"
			    type="datetime"
			    placement="bottom-end"
			    placeholder="请选择时间"
			    style="width: 90%"
			  ></DatePicker>
            </FormItem>
          </Col>
        </Row>
        
		<div class="goodsTitle acea-row">
		  <div class="title">其他设置</div>
		</div>
		<Row :gutter="24" type="flex">
		  <Col span="24">
		    <FormItem label="状态：" label-for="is_rec">
		      <RadioGroup v-model="formValidate.status" element-id="is_rec">
		        <Radio :label="0">待审核</Radio>
		        <Radio :label="1" class="radio">通过</Radio>
		        <Radio :label="2" class="radio">不通过</Radio>
		        <Radio :label="3" class="radio">已过期</Radio>
		      </RadioGroup>
		    </FormItem>
		  </Col>
		</Row>
		<Row :gutter="24" type="flex" v-if="formValidate.status == 2">
		  
		  <Col v-bind="grid" class="mr50">
		    <FormItem label="未通过理由：" prop="end_time" label-for="end_time">
		      <Input v-model="formValidate.end_time" type="textarea"  placeholder="请输入" style="width: 90%" />
		    </FormItem>
		  </Col>
		</Row>
        <Button type="primary" class="submission" @click="onsubmit('formValidate')">提交</Button>
      </Form>
      <Modal
        v-model="modalPic"
        width="950px"
        scrollable
        footer-hide
        closable
        title="上传封面图"
        :mask-closable="false"
        :z-index="888"
      >
        <uploadPictures
          :isChoice="isChoice"
          @getPic="getPic"
          :gridBtn="gridBtn"
          :gridPic="gridPic"
          v-if="modalPic"
        ></uploadPictures>
      </Modal>
	  
	  <Modal
	    v-model="modalPic2"
	    width="950px"
	    scrollable
	    footer-hide
	    closable
	    title="上传轮播图"
	    :mask-closable="false"
	    :z-index="888"
	  >
	    <uploadPictures
	      :isChoice="isChoice2"
	      @getPicD="getPic2"
	      :gridBtn="gridBtn"
	      :gridPic="gridPic"
	      v-if="modalPic2"
		  :maxLength="maxLength"
	    ></uploadPictures>
	  </Modal>
    </Card>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import uploadPictures from '@/components/uploadPictures';
import WangEditor from '@/components/wangEditor/index.vue';
import { saveApi, createApi, categoryTreeListApi } from '@/api/req';
export default {
  name: 'addArticle',
  components: { uploadPictures, WangEditor },
  data() {
    const validateUpload = (rule, value, callback) => {
      if (this.formValidate.cover) {
        callback();
      } else {
        callback(new Error('请上传封面'));
      }
    };
    return {
	 maxLength:5,
      dialog: {},
      isChoice: '单选',
      isChoice2: '多选',
      grid: {
        xl: 8,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24,
      },
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12,
      },
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8,
      },
      loading: false,
      formValidate: {
        id: 0,
        name: '',
        join_time	: '',
        cover: '',
        phone: '',
		address:'',
		imgs:[],
		is_rec:0,
		intro:'',
		use_time:'',
		start_time:'',
		end_time:'',
		status:0
      },
      content: '',
      ruleValidate: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        cover: [{ required: true, validator: validateUpload, trigger: 'change' }],
      },
      value: '',
      modalPic: false,
      modalPic2: false,
      template: false,
      treeData: [],
      formValidate2: {
        type: 1,
      },
      myConfig: {
        autoHeightEnabled: false, // 编辑器不自动被内容撑高
        initialFrameHeight: 500, // 初始容器高度
        initialFrameWidth: '100%', // 初始容器宽度
        UEDITOR_HOME_URL: '/admin/UEditor/',
        serverUrl: '',
      },
	  img_sele:''
    };
  },
  computed: {
    ...mapState('media', ['isMobile']),
    labelWidth() {
      return this.isMobile ? undefined : 120;
    },
    labelPosition() {
      return this.isMobile ? 'top' : 'right';
    },
  },
  watch: {
    $route(to, from) {
      if (this.$route.params.id) {
        this.getDetails();
      } else {
        this.formValidate = {
          id: 0,
          name: '',
          join_time: '',
          cover: '',
          phone: '',
          address: '',
		  is_rec:0,
		  intro:'',
		  status:0
        };
      }
    },
  },
  methods: {
    // 具体日期
    onchangeStartTime(e) {
      this.formValidate.start_time = e;
    },
    onchangeEndTime(e) {
      this.formValidate.end_time = e;
	  console.info(e)
    },
	  // 移动
	handleDragStart(e, item) {
	    this.dragging = item;
	},
	handleDragEnd(e, item) {
	    this.dragging = null;
	},
	handleDragOver(e) {
	    e.dataTransfer.dropEffect = 'move';
	},
	handleDragEnter(e, item) {
	    e.dataTransfer.effectAllowed = 'move';
	    if (item === this.dragging) {
	      return;
	    }
	    const newItems = [...this.formValidate.imgs];
	    const src = newItems.indexOf(this.dragging);
	    const dst = newItems.indexOf(item);
	    newItems.splice(dst, 0, ...newItems.splice(src, 1));
	    this.formValidate.imgs = newItems;
	},
    handleRemove(i) {
      this.formValidate.imgs.splice(i, 1);
      // this.oneFormValidate[0].pic = this.formValidate.imgs[0];
    },
    getEditorContent(data) {
      this.content = data;
    },
    // 选择图片
    modalPicTap() {
      this.modalPic = true;
    },
    // 选择图片
    modalPicMulTap() {
      this.modalPic2 = true;
    },
    // 选中图片
    getPic(pc) {
      this.formValidate.cover = pc.att_dir;
      this.modalPic = false;
    },
    getPic2(pc) {
		pc = pc.map((item) => {
		  return item.att_dir;
		});
		console.info(pc)
      this.formValidate.imgs = pc;
      this.modalPic2 = false;
    },
    // 分类
    getClass() {
      categoryTreeListApi()
        .then(async (res) => {
          this.treeData = res.data;
        })
        .catch((res) => {
          this.$Message.error(res.msg);
        });
    },
    // 提交数据
    onsubmit(name) {
      this.formValidate.content = this.content;
      this.$refs[name].validate((valid) => {
        if (valid) {
			console.info(1111)
          saveApi(this.formValidate)
            .then(async (res) => {
              this.$Message.success(res.msg);
              setTimeout(() => {
                this.$router.push({ path: '/admin/repair/audi' });
              }, 500);
            })
            .catch((res) => {
              this.$Message.error(res.msg);
            });
        } else {
			console.info('验证失败')
          return false;
        }
      });
    },
    // 详情
    getDetails() {
      createApi(this.$route.params.id ? this.$route.params.id : 0)
        .then(async (res) => {
          let data = res.data;
		  console.info(data)
		  let imgs = [];
		  if(data.imgs){
			  imgs = data.imgs.split(",");
		  }
          this.formValidate = {
            id: data.id,
            name: data.name,
            join_time: data.join_time,
            phone: data.phone,
			imgs:imgs,
			address:data.address,
			intro:data.intro,
			is_rec:data.is_rec,
			use_time:data.use_time,
			start_time:data.start_time,
			end_time:data.end_time,
			status:data.status
          };
        })
        .catch((res) => {
          this.loading = false;
          this.$Message.error(res.msg);
        });
    },
  },
  mounted() {
    if (this.$route.params.id) {
      this.getDetails();
    }
  },
  created() {
    this.getClass();
  },
};
</script>
<style scoped>
/deep/.ivu-form-item-content {
  line-height: unset !important;
}
.picBox {
  display: inline-block;
  cursor: pointer;
}

.form .goodsTitle {
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  margin-bottom: 25px;
}

.form .goodsTitle ~ .goodsTitle {
  margin-top: 20px;
}

.form .goodsTitle .title {
  border-bottom: 2px solid #1890ff;
  padding: 0 8px 12px 5px;
  color: #000;
  font-size: 14px;
}

.form .goodsTitle .icons {
  font-size: 15px;
  margin-right: 8px;
  color: #999;
}

.form .add {
  font-size: 12px;
  color: #1890ff;
  padding: 0 12px;
  cursor: pointer;
}

.form .radio {
  margin-right: 20px;
}

.form .submission {
  width: 10%;
  margin-left: 27px;
}

.form .upLoad {
  width: 58px;
  height: 58px;
  line-height: 58px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.02);
}

.form .iconfont {
  color: #898989;
}

.form .pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 10px;
}

.form .pictrue img {
  width: 100%;
  height: 100%;
}

.Modals .address {
  width: 90%;
}

.Modals .address .iconfont {
  font-size: 20px;
}
.tip {
  margin-top: 10px;
  color: #bbb;
}


.pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 15px;
  display: inline-block;
  position: relative;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }

  .btndel {
    position: absolute;
    z-index: 1;
    width: 20px !important;
    height: 20px !important;
    left: 46px;
    top: -4px;
  }
}
</style>
